import React, { useState } from 'react';
import { 
  Form, Input, Button, Select, DatePicker, Space, 
  Card, Divider, InputNumber, Upload, message 
} from 'antd';
import { 
  MinusCircleOutlined, PlusOutlined, 
  InboxOutlined, UploadOutlined 
} from '@ant-design/icons';
import '../../../styles/tutorial.css';

const { Option } = Select;

/**
 * 高级表单组件教程
 * 展示 Form 组件的高级特性和复杂场景应用
 * 
 * 包含以下核心内容：
 * 1. 表单联动 - 多字段依赖关系
 * 2. 动态表单 - 动态增减表单项
 * 3. 自定义表单控件 - 复杂的表单控件封装
 * 4. 复杂布局 - 多列布局和嵌套表单
 */
const AdvancedFormTutorial = () => {
  const [form] = Form.useForm();
  const [componentSize, setComponentSize] = useState('default');

  /**
   * 表单提交处理
   * @param {Object} values - 表单数据
   */
  const onFinish = (values) => {
    console.log('表单数据:', values);
    message.success('提交成功！');
  };

  /**
   * 自定义价格输入组件
   * 演示如何封装自定义表单控件
   */
  const PriceInput = ({ value = {}, onChange }) => {
    const [number, setNumber] = useState(0);
    const [currency, setCurrency] = useState('rmb');

    const triggerChange = (changedValue) => {
      onChange?.({
        number,
        currency,
        ...value,
        ...changedValue,
      });
    };

    return (
      <Space>
        <InputNumber
          value={value.number || number}
          onChange={(newNumber) => {
            setNumber(newNumber);
            triggerChange({ number: newNumber });
          }}
        />
        <Select
          value={value.currency || currency}
          style={{ width: 80 }}
          onChange={(newCurrency) => {
            setCurrency(newCurrency);
            triggerChange({ currency: newCurrency });
          }}
        >
          <Option value="rmb">RMB</Option>
          <Option value="usd">USD</Option>
        </Select>
      </Space>
    );
  };

  return (
    <div className="tutorial-container">
      <h1>Form 高级表单组件</h1>

      {/* 1. 表单联动 */}
      <section className="example-section">
        <h2>1. 表单联动</h2>
        <div className="section-description">
          <p>实现表单项之间的联动效果：</p>
          <ul>
            <li>字段间的依赖关系</li>
            <li>动态变化的校验规则</li>
            <li>联动显示和隐藏</li>
          </ul>
        </div>
        <Form
          form={form}
          layout="vertical"
          onFinish={onFinish}
          initialValues={{ size: componentSize }}
        >
          {/* 表单尺寸联动 */}
          <Form.Item label="表单尺寸" name="size">
            <Select
              value={componentSize}
              onChange={(value) => setComponentSize(value)}
            >
              <Option value="small">小</Option>
              <Option value="default">中</Option>
              <Option value="large">大</Option>
            </Select>
          </Form.Item>

          {/* 根据选择的尺寸动态改变其他表单项的大小 */}
          <Form.Item
            label="收货人"
            name="receiver"
            rules={[{ required: true, message: '请输入收货人姓名！' }]}
          >
            <Input size={componentSize} placeholder="请输入收货人姓名" />
          </Form.Item>

          <Form.Item
            label="联系电话"
            name="phone"
            rules={[{ required: true, message: '请输入联系电话！' }]}
          >
            <Input size={componentSize} placeholder="请输入联系电话" />
          </Form.Item>
        </Form>
      </section>

      {/* 2. 动态表单项 */}
      <section className="example-section">
        <h2>2. 动态表单项</h2>
        <div className="section-description">
          <p>Form.List 实现动态增减表单项：</p>
          <ul>
            <li>动态添加和删除表单项</li>
            <li>复杂的嵌套数据结构</li>
            <li>整体数据验证</li>
          </ul>
        </div>
        <Form
          name="dynamic_form"
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.List name="users">
            {(fields, { add, remove }) => (
              <>
                {fields.map(({ key, name, ...restField }) => (
                  <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                    <Form.Item
                      {...restField}
                      name={[name, 'firstName']}
                      rules={[{ required: true, message: '请输入姓名！' }]}
                    >
                      <Input placeholder="姓名" />
                    </Form.Item>
                    <Form.Item
                      {...restField}
                      name={[name, 'age']}
                      rules={[{ required: true, message: '请输入年龄！' }]}
                    >
                      <InputNumber placeholder="年龄" />
                    </Form.Item>
                    <MinusCircleOutlined onClick={() => remove(name)} />
                  </Space>
                ))}
                <Form.Item>
                  <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                    添加成员
                  </Button>
                </Form.Item>
              </>
            )}
          </Form.List>
        </Form>
      </section>

      {/* 3. 自定义表单控件 */}
      <section className="example-section">
        <h2>3. 自定义表单控件</h2>
        <div className="section-description">
          <p>自定义复杂表单控件的实现方式：</p>
          <ul>
            <li>组件值的双向绑定</li>
            <li>自定义校验逻辑</li>
            <li>组件状态管理</li>
          </ul>
        </div>
        <Form
          name="customized_form"
          onFinish={onFinish}
          layout="vertical"
        >
          <Form.Item
            name="price"
            label="价格"
            rules={[{ required: true, message: '请输入价格！' }]}
          >
            <PriceInput />
          </Form.Item>
        </Form>
      </section>

      {/* 4. 复杂布局 */}
      <section className="example-section">
        <h2>4. 复杂布局</h2>
        <div className="section-description">
          <p>复杂表单的布局处理：</p>
          <ul>
            <li>多列布局</li>
            <li>分组表单</li>
            <li>响应式设计</li>
          </ul>
        </div>
        <Form
          name="complex_form"
          onFinish={onFinish}
          layout="vertical"
        >
          <Card title="基本信息" style={{ marginBottom: 24 }}>
            <Space style={{ width: '100%' }} direction="vertical">
              <div style={{ display: 'flex', gap: 16 }}>
                <Form.Item
                  name="name"
                  label="姓名"
                  rules={[{ required: true }]}
                  style={{ flex: 1 }}
                >
                  <Input />
                </Form.Item>
                <Form.Item
                  name="age"
                  label="年龄"
                  rules={[{ required: true }]}
                  style={{ flex: 1 }}
                >
                  <InputNumber style={{ width: '100%' }} />
                </Form.Item>
              </div>
              <Form.Item
                name="address"
                label="地址"
                rules={[{ required: true }]}
              >
                <Input.TextArea />
              </Form.Item>
            </Space>
          </Card>

          <Card title="附件上传" style={{ marginBottom: 24 }}>
            <Form.Item name="dragger">
              <Upload.Dragger multiple>
                <p className="ant-upload-drag-icon">
                  <InboxOutlined />
                </p>
                <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
              </Upload.Dragger>
            </Form.Item>
          </Card>

          <Form.Item>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </section>
    </div>
  );
};

export default AdvancedFormTutorial; 